<!-- 蓝色简洁登录页面 -->
<template>
	<view class="login-bg">
		<image class="img-a" src="../../static/login/bg1.png"></image>
		<view class="mainTitle">E云教育考试平台</view>
		<!-- 登录页 -->
		<view class="t-login" v-if="logOrSign">
			<view class="loginTitle">用 户 登 录</view>
			<form class="logForm">
				<view class="inputSpan">
					<image src="@/static/login/user.png"></image>
					<input type="text" name="phone" placeholder="请输入账号" maxlength="11" v-model="account" />
				</view>
				<view class="inputSpan">
					<image src="@/static/login/lock.png"></image>
					<input type="text" name="pwd" placeholder="请输入密码" v-model="password" />
				</view>

				<button @click="login">登 录</button>
				<view class="otherChoose">
					<span @click="reg()">立刻注册</span>
					<span @click="forgotPwd()">忘记密码</span>
				</view>
			</form>
		</view>
		<!-- 注册页 -->
		<view class="t-login" v-else>
			<view class="loginTitle">注 册</view>
			<form class="logForm">
				<view class="inputSpan">
					<image src="@/static/login/user.png"></image>
					<input type="number" name="phone" placeholder="请输入学号" maxlength="11" v-model="account" />
				</view>
				<view class="inputSpan">
					<image src="@/static/login/lock.png"></image>
					<input type="password" name="pwd" placeholder="请输入密码" v-model="password" />
				</view>
				<view class="inputSpan">
					<image src="@/static/login/lock.png"></image>
					<input type="password" name="pwd" placeholder="请再次输入密码" v-model="passwordAgain" />
				</view>

				<button @tap="signIn()">注 册</button>
				<view class="otherChoose">
					<span @tap="reg()">立刻登录</span>
					<!-- <span @tap="pauseLog()">暂不注册</span> -->
					<!-- <span @tap="forgotPwd()">忘记密码</span> -->
				</view>
			</form>
		</view>
		<image class="img-b" src="../../static/login/bg2.png"></image>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	// import getStuInfo from '@/common/api/login.js'
	import store from '@/store/index.js'; //需要引入store
	// import userInfo from "../../data/userInfo.js"
	export default {
		data() {
			return {
				// userInfo: userInfo,
				account: '2020001', //手机号码
				password: '123456', //密码
				passwordAgain: '123456', //密码
				logOrSign: true
			};
		},
		methods: {
			//当前登录按钮操作
			login() {
				var that = this;
				// 验证是否输入账号
				if (!that.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}

				// 验证是否输入密码
				if (!that.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				/* 数据源使用本地Json */
				// 获取token (使用本地Json数据源, token没啥用, 但为了符合开发标准, 还是进行先获取token的操作)
				import("@/common/login_token.js").then(data => {
					// console.log("1")
					// console.log(token)
					that.$store.commit('setAccessToken', data.token)
				})
				// 获取用户信息
				import("@/common/login_userInfo.js").then(data => {
					that.$store.commit('setUserInfo', data.userInfo)
					that.$store.state.hasLogin = true
				})

				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					url: '/pages/mine/mine',
					duration: 1000,
					isTab: true
				})

				/* 如果需要调用数据源则使用以下代码
				this.$api.login(this.account, this.password)
					.then(res => {
						console.log('login res', res)
						// 从VueX中读取token
						if (res.status == 1) {
							// 未成功读取到账号信息
							uni.showToast({
								title: '账号或密码错误！',
								icon: 'none'
							});
						} else {
							// 成功读取到账号信息
							// that.$store.state.access_token = res.values
							// 将token存入vuex的state中
							that.$store.commit('setAccessToken', res.values)
							that.$store.state.hasLogin = true
							uni.setStorage({
								key: 'token',
								data: res.values,
								success: function() {
									console.log('token set success');
								}
							});
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								url: '/pages/mine/mine',
								duration: 1000,
								isTab: true
							})
						}
						console.log('token值：', this.$store.state.access_token);
					})
				*/
			},

			//忘记密码
			forgotPwd() {
				console.log('忘记密码');
				uni.showToast({
					title: '忘记密码',
					icon: 'none'
				});
			},
			//立刻注册
			reg() {
				this.logOrSign = !this.logOrSign
				// uni.showToast({
				// 	title: '立刻注册',
				// 	icon: 'none'
				// });
			},
			// 暂不登录
			pauseLog() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		// background: url('https://s3.ax1x.com/2021/02/10/ywsY4g.png') no-repeat;
		background: linear-gradient(to bottom, #29b6f6, #039be5);
		background-attachment: fixed;
		// background-size: 100% 100%;

	}

	.login-bg {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		flex-direction: column;
	}

	.mainTitle {
		color: white;
		font-weight: bold;
		font-size: 55rpx;
		letter-spacing: 0.2em;
		margin-bottom: 30rpx;
	}

	.img-a {
		width: 100%;
		top: 0;
		position: absolute;
	}

	.img-b {
		width: 100%;
		height: 60px;
		bottom: 0;
		position: absolute;
	}

	.t-login {
		width: 650rpx;
		padding: 55rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		border-radius: 60rpx;
		box-shadow: 5px 5px 7px 0 rgba(0, 0, 0, 0.15);
		z-index: 9;

		.loginTitle {
			text-align: left;
			font-size: 46rpx;
			color: #1296db;
			font-weight: bold;
			margin: 0 0 50rpx 20rpx;
		}

		.inputSpan {
			position: relative;

			input {
				padding: 0 20rpx 0 120rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin-bottom: 50rpx;
				background: #f6f6f6;
				border: 1px solid #f6f6f6;
				font-size: 28rpx;
				border-radius: 50rpx;

				.uni-input-placeholder {
					color: #aeaeae;
				}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 40rpx;
				top: 28rpx;
				padding-right: 20rpx;

			}
		}

		.otherChoose {
			text-align: right;
			color: #c0c0c0;
			margin: 40rpx auto 0rpx auto;
			display: flex;
			justify-content: space-between;
		}

		button {
			font-size: 32rpx;
			background: linear-gradient(45deg, #81d4fa, #0288d1);
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
		}
	}
</style>
